<script setup lang="ts">
import type { TagProps } from 'element-plus';

import { computed } from 'vue';

import { getDictObj } from '@vben/hooks';

import { ElTag } from 'element-plus';

interface DictTagProps {
  type: string;
  value: any;
  icon?: string;
}

const props = defineProps<DictTagProps>();

// 使用组合式函数处理类型映射
const useDictTag = (props: DictTagProps) => {
  return computed(() => {
    if (!props.type || props.value === undefined || props.value === null) {
      return null;
    }

    const dict = getDictObj(props.type, String(props.value));
    if (!dict) {
      return null;
    }

    let tagType: TagProps['type'];

    switch (dict.colorType) {
      case 'danger':
      case 'error': {
        tagType = 'danger';
        break;
      }
      case 'info': {
        tagType = 'info';
        break;
      }
      case 'primary':
      case 'processing': {
        tagType = 'primary';
        break;
      }
      case 'success': {
        tagType = 'success';
        break;
      }
      case 'warning': {
        tagType = 'warning';
        break;
      }
      default: {
        tagType = 'primary';
      }
    }

    return {
      label: dict.label || '',
      type: tagType,
    };
  });
};

const dictTag = useDictTag(props);
</script>

<template>
  <ElTag v-if="dictTag" :type="dictTag.type">
    {{ dictTag.label }}
  </ElTag>
</template>
